<template>
    <div class="params">
        <el-button type="primary" @click="addParamsHandle">添加规格参数</el-button>


        <el-table :data="paramsData" style="width:100%">
            <el-table-column show-overflow-tooltip width="60px" prop="id" label="ID"/>
            <el-table-column show-overflow-tooltip width="80px" prop="itemCatId" label="类目ID"/>
            <el-table-column show-overflow-tooltip width="500px" prop="paramData" label="规格"/>
            <el-table-column show-overflow-tooltip prop="created" label="创建日期"/>
            <el-table-column show-overflow-tooltip prop="updated" label="更新日期"/>
            <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            icon="el-icon-delete"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                            circle
                    />
                </template>

            </el-table-column>
        </el-table>


        <el-dialog width="50%" title="商品类目选择" :visible.sync="paramsVisible">
            <el-tree
                    :load="loadTreeNodes"
                    :props="defaultProps"
                    lazy
                    highlight-current
                    @node-click="handleNodeClick"
            />
            <el-dialog width="50%" title="添加分组" :visible.sync="groupsVisible" append-to-body>

                <ParamsAdd @onParamsAdd="getParamsAdd"/>

            </el-dialog>
            <div slot="footer" class="dialog-footer">
                <el-button @click="paramsVisible = false">取 消</el-button>
                <el-button type="primary" @click="groupsVisibleHandler">确定并添加分组</el-button>
            </div>

        </el-dialog>

    </div>
</template>

<script>
    import ParamsAdd from "./ParamsAdd";
    export default {
        name: "ParamsList",
        components:{
            ParamsAdd
        },
        data(){
          return{
              paramsData:[],
              paramsVisible:false,
              groupsVisible: false,
              defaultProps: {
                  children: "children",
                  label: "name"
              },
              cid:0
          }
        },
        methods:{
            // 删除
            handleDelete(index,row){
                console.log(row);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.getDeleteItemParamById({
                        id:row.id
                    }).then(res=>{
                        // console.log(res.data);
                        if (res.data.status === 200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.http();

                        }else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                            // alert('')
                        }
                    }).catch(error=>{
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        });
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            http(){
                this.$api.getSelectItemParamAll({
                }).then(res=>{
                    // console.log(res.data);
                    if (res.data.status === 200){
                        this.paramsData = res.data.data.result;
                    }else {
                        alert(res.msg);
                    }

                })
            },
            addParamsHandle(){
                this.paramsVisible = true;
            },
            // tree懒加载事件
            loadTreeNodes(node, resolve) {
                this.currentCategory = node.data;
                // 判断是否是第一次
                if (node.level === 0) {
                    this.$api.getXuanzeLeimu().then(res => {
                        if (res.status === 200) {
                            return resolve(res.data.data);
                        } else {
                            alert("请求失败");
                        }
                    });
                }
                if (node.level >= 1) {
                    this.$api
                        .getXuanzeLeimu({
                            id: node.data.cid
                        })
                        .then(res => {
                            if (res.status === 200) {
                                return resolve(res.data.data);
                            } else {
                                alert("请求失败");
                            }
                        })
                        .catch(error => {
                            resolve([]);
                        });
                }
            },
            // tree点击事件
            handleNodeClick(data) {
                // console.log(data);
               this.cid = data.cid;
            },
            groupsVisibleHandler() {
                this.groupsVisible = true;
            },
            getParamsAdd(data){
                console.log(data);
                this.$api.getInsertItemParam({
                    itemCatId:this.cid,
                    paramData:data
                }).then(res=>{
                    if (res.data.status === 200){
                        this.http();
                        this.paramsVisible = false;
                        this.groupsVisible = false;
                    }else {
                        alert('添加失败');
                    }
                });


            }
        },
        mounted(){
            // console.log( this.$api.getSelectItemParamAll());
            this.http();
        }
    }
</script>

<style scoped>
    .params {
        width: 1200px;
        margin: 0 auto;
        margin-top: 10px;
    }
</style>